<template>
  <div>
<!-- 导航栏 -->
<van-nav-bar
  title="千禧婚礼纪"
  left-text=""
  left-arrow
  @click-left="onClickLeft" 
/>
<!-- 轮播背景图 -->
<van-swipe :autoplay="3000" style="width:370px; height:300px">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image"  style="width:100%"/>
  </van-swipe-item>
</van-swipe>
<!-- 主题风格 -->
<div class="container">
<div class="box">
<div class="picture">
    <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="">
  </div>
  <div class="introduction">
    <span>法式浪漫-纪实风</span>
  </div>
</div> 

<!-- 定位 -->
<div class="posation">
  <div>兰州南街66号</div>
</div>
<div class="present">
  <span>到店礼</span>
  <span>电影纪实一份</span>
</div>
</div> 
<!-- 4个切换页面 -->
<div class="vant-tab">
  <van-tabs v-model="activeName" sticky>
  <!-- 第一页面板 -->
  <van-tab title="风格" name="a">
    <div class="style">4月·新片发布</div>
    <div class="tab_picture"><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
  </van-tab>
  <!-- 第二页面板 -->
  <van-tab title="套餐 " name="b">
    <div class="set_meal_container">
      <div class="advise_setmeal">推荐套餐</div>
      <div class="set_meal">
        <div class="set_meal_price">￥2899</div>
 <div class="advise">
      <span>主推</span>
      <span class="advise_span">【小预算优选】高性价比婚纱照</span>
      </div>
    
      <div class="setmeal_details">
        <div class="all-group">
    <div class="group">
          <div>
           <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
           </div>
          <div class="mini_group">
          <span>摄影师</span>
          <span>首席</span>
          </div>
          
        </div>
         
          <div class="group">
            <div>
           <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
           </div>
         <div class="mini_group">
        <span>拍摄张数</span>
        <span>80张</span>
        </div> 
        </div>
         
          <div class="group">
         <div>
           <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
           </div>
          <div class="mini_group">
          <span>服装</span>
          <span>两套</span>  
           </div>  
        </div>
         
          <div class="group">
           <div>
           <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
           </div>
           <div class="mini_group">
          <span>精修张数</span>
          <span>30张</span>
           </div>  
        </div>
        </div>   
      </div>
      </div>     
      </div>
 <!-- 第三个面板 -->
  </van-tab>
  <van-tab title="商家 " name="c">
    <div>
      <div class="Business_introduction">商家介绍</div>
      <div>一群手艺人,不太会说话,只用图片诉说故事,主打情感,热衷创新,拿客片说话的原创工作室,用心记录感动</div>
    </div>
  </van-tab>
  <van-tab title="评价 " name="d">评价</van-tab>
</van-tabs>
</div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  data() {
    return {
       activeName: 'a',
       images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
        'https://img01.yzcdn.cn/vant/apple-3.jpg',
        'https://img01.yzcdn.cn/vant/apple-4.jpg',
       
      ],
    }
  }, 
   methods: {
    onClickLeft() {
      Toast('返回');
    },
  },
  
}
</script>
<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
.container{
  position: relative;
margin:0 40px ;
top: -220px;
background-color: #fff;
border-radius: 7px;
  .box{ 
margin-bottom: 20px;
display: flex;
justify-content: center;

border: 1px solid #fff;
border-radius: 9px;
.picture{
    width: 240px;
    height: 240px;
    position: relative;
    margin: 20px 0;
    left: -65px;
  }
  img{
    width: 100%;
  }
.introduction{
margin-top: 70px;
>span{
margin-left: 5px;

font-size: 35px;
}
}
  }
  // 定位
  .posation{
    background-color: #eee;
    padding: 20px;
    font-size: 32px;
    border-radius: 5px;
    margin: 0 15px;
  }
  // 到店礼
  .present{
    background-color: antiquewhite;
    font-size: 20px;
    padding: 10px;
    
    margin: 20px 15px 0 20px;
  } 
}

// 导航tab
// 第一个控制面板
.vant-tab{
  position: relative;
  top: -100px;
  // 风格文字
  .style{
    text-align: left;
    font-size: 18px;
    margin-top: 25px;
    margin-left: 30px;
  }
  // 风格图片
 .tab_picture{
   width: 350px;
   height: 300px;
   margin: 20px 10px;
   img{
     width: 100%;
     border-radius: 8px;
   }
  }

  // 第二面板-套餐
 .set_meal_container{
   margin-top: 10px;
   background-color: #eee;
    font-size: 18px;
.advise_setmeal{
  text-align: left;
  padding: 15px;

}
  .set_meal{
    background-color: #f5f5f5;
    margin: 3px 18px 0 18px;
   
    border-radius: 5px;
    .set_meal_price{
    text-align: left; 
    padding: 15px;
    padding-top: 25px;
    font-weight: bold;
    font-size: 30px;
    }
 
.advise>span:first-child{
  
  padding: 5px;
  background-color: pink;
  border-radius: 3px;
  font-size: 12px;
  color: red;
}

.advise_span{
 font-size: 14px;
  margin-bottom: 15px;
}
 } 

.setmeal_details{
  background-color: #fff;
  display: flex;
  margin: 10px;
  border-radius: 6px;
  flex-wrap: wrap;
  padding: 25px;
  font-size: 16px;
}
// 总小组
.all-group{
  display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
  // padding: 10px;
// 详情中每个小组
.group{
  display: flex;
  align-items: center;
margin-bottom: 20px;
  .van-icon{
    margin-right: 15px;
  }
  .mini_group{
    width: 64px;
    display: flex;
    flex-direction: column; 
  }
}
}
// 第三个面板
.Business_introduction{
  
}
}
}
</style>